<template>
	<view class="detail" v-if="detailObj.goods_name">
		<!-- 轮播图区域 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in detailObj.pics" :key="index">
				<image @click="preImage(index)" :src="item.pics_big_url" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 商品信息区域 -->
		<view class="infobox">
		  <view class="price">
		    ￥{{ detailObj.goods_price }}
		  </view>
		  <view class="info">
		    <view class="left">
		      {{ detailObj.goods_name }}
		    </view>
		    <view class="right">
		      <uni-icons type="star" size="20"></uni-icons>
		      <text>收藏</text>
		    </view>
		  </view>
		  <view class="pass">
		    快递：免运费
		  </view>
		</view>
		<!-- 商品介绍-->
		<rich-text :nodes="detailObj.goods_introduce"></rich-text>
        <!-- 商品导航区域 -->
        <uni-goods-nav class="goodsnav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="myclick" @buttonClick="mybuttonclick"></uni-goods-nav>
	</view>
</template>

<script>
	// 导入辅助函数
	import { mapState ,mapMutations , mapGetters} from 'vuex'
	export default {
		computed: {
		    ...mapState('cart', ['num']),
			...mapGetters('cart', ['total'])
		  },
		data() {
			return {
				// 商品详情页数据源
				detailObj:{},
				// 商品 id
				goods_id: '',
				// 左侧icon
				    options: [{
				        text: '店铺',
				        icon: 'shop'
				      },
				      {
				        text: '购物车',
				        icon: 'cart',
				        info: '3',
				        infoBackgroundColor: '#ff0101',
				        infoColor: '#fff'
				      }
				    ],
				    // 右侧按钮
				    buttonGroup: [{
				        text: '加入购物车',
				        backgroundColor: '#ff0000',
				        color: '#fff'
				      },
				      {
				        text: '立即购买',
				        backgroundColor: '#ffa200',
				        color: '#fff'
				      }
				    ]
			};
		},
		onShow() {
		  // 设置 tabBar 右上角的徽标
		  uni.setTabBarBadge({
		    index: 2,
		    text: this.total + ''
		  })
		},

		onLoad(options){
			// 得到商品 id
			this.goods_id = options.goods_id
			// 根据商品 id 发送请求到服务器得到商品详情
			this.getDeatilObj()
			uni.setTabBarBadge({
			  index: 0, // 要设置 tabBar 中文本的索引
			  text: '1' // 设置的图标内容（必须是字符串，不能为数字）
			})
		},
		watch: {
		  total: {
		    handler: function(newV) {
		      // 只要商品总数改变，就让 options[1].info 中的值改变
		      this.options[1].info = newV
		    },
		    immediate: true // 打开页面立即执行
		  }
		},
		
		methods:{
			...mapMutations('cart', ['addToCart']),
			async getDeatilObj(){
				let{
					data:res
				} = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${this.goods_id}`)
				// 判断状态
				if(res.meta.status !== 200)return uni.$showMsg()
				// 保存数据
				this.detailObj = res.message
				 // 给对象中图文详情的 img 添加一个 style: 'display: block'
				this.detailObj.goods_introduce = this.detailObj.goods_introduce.replace(/<img /g, ' <img style="display: block;" ')
			     // 将图片的后缀名从 webp 改为 jpg
			    this.detailObj.goods_introduce = this.detailObj.goods_introduce.replace(/.webp/g, '.jpg')
			},
			// 预览图片
			preImage(index) {
			  // 得到所有要预览图片的连接
			  let urls = this.detailObj.pics.map(item => {
			    return item.pics_big_url
			  })
			  // 预览图片
			  uni.previewImage({
			    urls: urls,
			    current: index
			  })
			},
			// 点击左侧的 icon
			myclick(e) {
			  // 点击左侧按钮的事件
			  if (e.index === 1) {
			    // 跳转到购物车中
			    uni.switchTab({
			      url: '/pages/cart/cart'
			    })
			  }
			},
			// 点击右侧的按钮
			mybuttonclick(e) {
			  console.log('mybuttonclick')
			  // 判断是否点击的是加入购物车
			  if (e.index === 0) {
			    // 将当前商品添加到购物车中
			    this.addToCart({
			      goods_id: this.detailObj.goods_id,
			      goods_name: this.detailObj.goods_name,
			      goods_price: this.detailObj.goods_price,
			      goods_small_logo: this.detailObj.goods_small_logo,
			      goods_count: 1,
			      goods_status: true
			    })
			  }
			},
			
		}
	}
</script>

<style lang="scss">
	.detail {
		padding-bottom: 50px;
	  .swiper {
	    height: 750rpx;
	    image {
	      width: 100%;
	      height: 750rpx;
	    }
	  }
	  .infobox {
	      padding: 0 20rpx;
	  
	      .price {
	        color: #c30d02;
	        font-size: 24px;
	        line-height: 100rpx;
	      }
	  
	      .info {
	        font-size: 14px;
	        display: flex;
	        justify-content: space-between;
	  
	        .left {
	          word-break: break-all;
	          text-overflow: ellipsis;
	          display: -webkit-box;
	          -webkit-box-orient: vertical;
	          -webkit-line-clamp: 2;
	          overflow: hidden;
	        }
	  
	        .right {
	          width: 300rpx;
	          display: flex;
	          flex-direction: column;
	          justify-content: center;
	          align-items: center;
	          border-left: 1px solid #ccc;
	        }
	      }
	  
	      .pass {
	        font-size: 12px;
	        line-height: 60rpx;
	        color: #8b949f;
	      }
	    }
		.goodsnav {
		      position: fixed;
		      width: 100%;
		      bottom: 0;
		      left: 0;
		    }

	}
</style>
